<template>
  <div class="quick-reply-management">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>快捷回复管理</span>
          <el-button type="primary" @click="handleCreate">新增快捷回复</el-button>
        </div>
      </template>

      <!-- 数据表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="title" label="标题" width="200" />
        <el-table-column prop="content" label="内容" />
        <el-table-column prop="category" label="分类" width="120" />
        <el-table-column prop="sortOrder" label="排序" width="100" />
        <el-table-column label="作用域" width="100">
          <template #default="{ row }">
            <el-tag v-if="row.staffId" type="info">个人</el-tag>
            <el-tag v-else type="success">全局</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="160">
          <template #default="{ row }">
            {{ formatDateTime(row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-button link type="danger" @click="handleDelete(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog 
      v-model="showDialog" 
      :title="dialogTitle"
      width="600px"
    >
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input 
            v-model="form.content" 
            type="textarea" 
            :rows="5"
            placeholder="请输入回复内容"
          />
        </el-form-item>
        <el-form-item label="分类" prop="category">
          <el-input v-model="form.category" placeholder="请输入分类，如：售前、售后" />
        </el-form-item>
        <el-form-item label="排序" prop="sortOrder">
          <el-input-number v-model="form.sortOrder" :min="0" :max="999" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import {
  getQuickReplyList,
  createQuickReply,
  updateQuickReply,
  deleteQuickReply,
  type QuickReply,
  type QuickReplyReq
} from '@/api/modules/chat'

const tableData = ref<QuickReply[]>([])
const showDialog = ref(false)
const dialogTitle = ref('')
const formRef = ref<FormInstance>()
const currentId = ref<number | null>(null)

const form = ref<QuickReplyReq>({
  title: '',
  content: '',
  category: '',
  sortOrder: 0
})

const rules: FormRules = {
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
  category: [{ required: true, message: '请输入分类', trigger: 'blur' }]
}

onMounted(() => {
  loadData()
})

async function loadData() {
  try {
    const { data } = await getQuickReplyList()
    tableData.value = data.list
  } catch (error: any) {
    ElMessage.error('加载数据失败: ' + error.message)
  }
}

function handleCreate() {
  currentId.value = null
  dialogTitle.value = '新增快捷回复'
  form.value = {
    title: '',
    content: '',
    category: '',
    sortOrder: 0
  }
  showDialog.value = true
}

function handleEdit(row: QuickReply) {
  currentId.value = row.id
  dialogTitle.value = '编辑快捷回复'
  form.value = {
    title: row.title,
    content: row.content,
    category: row.category,
    sortOrder: row.sortOrder
  }
  showDialog.value = true
}

async function handleSubmit() {
  if (!formRef.value) return

  await formRef.value.validate(async (valid) => {
    if (!valid) return

    try {
      if (currentId.value) {
        await updateQuickReply(currentId.value, form.value)
        ElMessage.success('更新成功')
      } else {
        await createQuickReply(form.value)
        ElMessage.success('创建成功')
      }
      showDialog.value = false
      loadData()
    } catch (error: any) {
      ElMessage.error('操作失败: ' + error.message)
    }
  })
}

async function handleDelete(id: number) {
  try {
    await ElMessageBox.confirm('确定要删除这条快捷回复吗？', '提示', {
      type: 'warning'
    })
    
    await deleteQuickReply(id)
    ElMessage.success('删除成功')
    loadData()
  } catch (error: any) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败: ' + error.message)
    }
  }
}

function formatDateTime(time: string): string {
  return new Date(time).toLocaleString('zh-CN')
}
</script>

<style scoped lang="scss">
.quick-reply-management {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>

